<template>
  <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0"
    :title="crud.status.title" width="630px">
    <el-form ref="form" :model="form" :rules="rules" size="small" :inline="true" label-width="90px">
      <el-tabs tab-position="left" v-model="productActiveName" style="height: 400px;">
        <el-tab-pane label="基础信息" name="basics">

          <el-form-item label="安东编码" prop="antonCode">
            <el-input v-model="form.antonCode" style="width: 190px;" />
          </el-form-item>

          <el-form-item label="安东事件" prop="antonEvent">
            <el-input v-model="form.antonEvent" style="width: 190px;" />
          </el-form-item>


          <el-form-item label="安东类型" prop="antonTypeName">
            <el-select v-model="form.antonTypeName" clearable size="small" placeholder="安东类型" class="filter-item"
              style="width: 120px">
              <el-option v-for="item in dict.antonConfig_type" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="安东模式" prop="model">
            <el-select v-model="form.model" clearable size="small" placeholder="安东模式" class="filter-item"
              style="width: 120px">
              <el-option v-for="item in dict.antonConfig_model" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="安东级别" prop="level">
            <el-select v-model="form.level" clearable size="small" placeholder="安东级别" class="filter-item"
              style="width: 120px">
              <el-option v-for="item in dict.antonConfig_level" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="是否禁用" prop="isDisable">
            <el-radio v-for="item in dict.antonConfig_state" :key="item.value" v-model="form.isDisable"
              :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-form-item>

          <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" :rows="3" type="textarea" style="width: 480px" />
          </el-form-item>
        </el-tab-pane>

        <el-tab-pane label="关联设备" name="device">
          <div class="treeDiv">
            <el-tree :data="deviceData" show-checkbox node-key="code" default-expand-all ref="deviceTree"
              highlight-current :props="defaultProps">
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="crud.cancelCU">
        取消
      </el-button>
      <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import crudCraftOperationDevice from '@/api/craft/craftOperationDevice'
import crudFactoryModel from '@/api/factory/factoryModel'
const defaultForm = {
  id: null,
  antonTypeName: '',//安东类型名称
  antonCode: '',//安东编码
  antonEvent: '',//安东事件
  description: '',//描述
  level: '',//级别
  model: '',//模式
  isDisable: '1',//是否禁用
  antonConfigDevices: []//安东配置与设备编码关联关系 
}
export default {
  mixins: [form(defaultForm)],
  props: {
    dict: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      productActiveName: 'basics',
      rules: {
        antonCode: [
          { required: true, message: '请输入安东编码', trigger: 'blur' }
        ],
        antonEvent: [
          { required: true, message: '请输入安东事件名称', trigger: 'blur' }
        ], antonTypeName: [
          { required: true, message: '请输入安东类型名称', trigger: 'blur' }
        ], model: [
          { required: true, message: '请输入安东模式', trigger: 'blur' }
        ], level: [
          { required: true, message: '请输入安东级别', trigger: 'blur' }
        ], isDisable: [
          { required: true, message: '请选择安东配置状态', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'id', display_name: 'ID' },
        { key: 'antonCode', display_name: '安东编码' },
        { key: 'antonEvent', display_name: '安东事件' },
        { key: 'antonTypeName', display_name: '安东类型' },
        { key: 'model', display_name: '安东模式' },
        { key: 'isDisable', display_name: '是否禁用' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }, deviceData: []
    }
  }, methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh] () {
      return true
    },
    //新增/修改之前
    [CRUD.HOOK.beforeToCU] (crud) {
      //初始化设备树
      this.initDeviceTree();
      return true
    },
    //新增之前
    [CRUD.HOOK.afterToAdd] (crud, param) {
      //清空树
      this.$refs.deviceTree.setCheckedKeys([]);
      return true
    },
    //编辑之前
    [CRUD.HOOK.afterToEdit] (crud, param) {
      //加载设置设备数据
      this.setDeviceTreeValue(param);
      return true
    },
    //表单提交之前
    [CRUD.HOOK.beforeSubmit] (crud) {
      //获取选中的设备值
      const deviceKeys = this.getDeviceTreeValue();


      if (!deviceKeys || deviceKeys.length == 0) {
        this.productActiveName = 'device';
        this.$notify.error({
          title: '错误',
          message: '请选择关联的设备后再提交！'
        });
        return false;
      }

      const devices = [];
      for (const key of deviceKeys) {
        devices.push({ antonCode: crud.form.antonCode, deviceCode: key });
      }
      crud.form.antonConfigDevices = devices;

      return true;
    },
    //初始化设备树
    initDeviceTree () {
      crudFactoryModel.getTree().then(res => {
        this.deviceData = res;
      })
    },
    setDeviceTreeValue (param) {
      crudCraftOperationDevice.list({ operationCode: param.operationCode }).then(res => {
        const keys = [];
        if (res) {
          for (const index in res) {
            keys.push(res[index].deviceCode);
          }
        }
        this.$refs.deviceTree.setCheckedKeys(keys);
      })
    },
    //获取选中的设备
    getDeviceTreeValue () {
      const nodes = this.$refs.deviceTree.getCheckedNodes();
      const keys = [];
      if (!nodes || nodes.length == 0) {
        return keys;
      }
      for (const index in nodes) {
        if (nodes[index].type == '5') {
          keys.push(nodes[index].code);
        }
      }
      return keys;
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
</style>
